<nz-card [nzBodyStyle]="{'padding':'0'}" [nzTitle]="extraTemplate">
    <nz-tree-view [nzTreeControl]="treeControl" [nzDataSource]="dataSource" [nzBlockNode]="true"
        [nzDirectoryTree]="true">
        <nz-tree-node *nzTreeNodeDef="let node" nzTreeNodePadding>
            <nz-tree-node-toggle nzTreeNodeNoopToggle></nz-tree-node-toggle>
            <nz-tree-node-option [nzDisabled]="node.disabled" [nzSelected]="selectListSelection.isSelected(node)"
                (nzClick)="selectListSelection.toggle(node)">
                <i nz-icon [nzType]="node.icon"></i>
                {{ node.name }} <span style="color: rgb(30, 162, 214);">({{node.url}})</span>
            </nz-tree-node-option>
        </nz-tree-node>

        <nz-tree-node *nzTreeNodeDef="let node; when: hasChild" nzTreeNodePadding>
            <nz-tree-node-toggle>
                <i nz-icon nzType="caret-down" nzTreeNodeToggleRotateIcon></i>
            </nz-tree-node-toggle>
            <nz-tree-node-option [nzDisabled]="node.disabled" [nzSelected]="selectListSelection.isSelected(node)"
                (nzClick)="selectListSelection.toggle(node)">
                <i nz-icon [nzType]="node.icon"></i>
                {{ node.name }}
            </nz-tree-node-option>
        </nz-tree-node>
    </nz-tree-view>
</nz-card>


<ng-template #extraTemplate>
    <div nz-row>
        <div nz-col>
            <button class="button" nz-button nzType="primary" (click)="gotoAddMenu()">
                <i nz-icon nzType="plus" nzTheme="outline"></i>
                新增菜单项
            </button>
            <button class="button" nz-button nzType="default" (click)="gotoEditMenu()">
                <i nz-icon nzType="plus" nzTheme="outline"></i>
                编辑菜单项
            </button>
            <button class="button" nz-button nzType="default" (click)="addRootMenu()">
                <i nz-icon nzType="plus" nzTheme="outline"></i>
                新增一级菜单
            </button>
        </div>
    </div>
</ng-template>
<ng-template #suffixIconButton>
    <button (click)="loadTree()" nz-button nzType="primary" nzSearch><i nz-icon nzType="search"></i></button>
</ng-template>


<nz-modal [(nzVisible)]="isInputDirVisible" nzTitle="请输入目录名称" (nzOnOk)="onDirInputedOk()">
    <ng-container *nzModalContent>
        <h1>上级菜单：</h1>
        <p>Content two</p>
        <p>Content three</p>
    </ng-container>
</nz-modal>